import React from 'react'
import { View, Text, FlatList, TouchableOpacity, Image, ScrollView} from 'react-native'
import checkStyle from '../../css/checkStyle'
const List = (props) => {
    
    const DATA = [
        {title: '上海分公司'},
        {title: '深圳分公司'},
        {title: '北京分公司'}, 
        {title: '河北分公司'}, 
        {title: '山西分公司'}, 
        {title: '内蒙古分公司'},
        {title: '四川分公司'},
    ]

    const Item = ({ title }) => {
        return (
          <View style={checkStyle.item}>
            <Text style={checkStyle.listTitle}>{title}</Text>
          </View>
        );
      }

    const getData = () => {
        props.navigation.push('CheckFirst')
    }

    const renderItem = ({ item }) => (
        <TouchableOpacity onPress={ getData }>
             <Item title={item.title} />
        </TouchableOpacity>
       
      )
    
    const header = () => {
        return (
        <View style={{flexDirection: 'row', marginTop: 10}}>
            <Text style={{ width: 4,height: 14,backgroundColor: '#3E75F6',borderRadius: 12, marginLeft: 5}}></Text>
            <Text style={{fontSize: 15, color: '#23283E', width: 100, height: 20, marginLeft: 5, marginTop: -4}}>选择营业机构</Text>
        </View>
        )
    }

    const separator = () => {
        return (
        <View style={{ height:2,backgroundColor:'#DEE2EA', marginLeft: 15}}/>
        )}

    return (
       <ScrollView stickyHeaderIndices={[0]} style={{backgroundColor: '#fff', marginTop: 10}}>          
            <FlatList
                    data={DATA}
                    renderItem={renderItem}
                    keyExtractor={item => item.id}
                    // style={checkStyle.listView}
                    ListHeaderComponent={ header }
                    ItemSeparatorComponent={ separator }  
                >
            </FlatList> 
       </ScrollView>
       
    )
}

export default List